<!--
 * @Author: hifishroom
 * @Date: 2021-08-26 14:15:04
 * @LastEditTime: 2021-08-26 14:15:05
 * @FilePath: \backstage\src\views\background\childsContent\information\Project.vue
-->

<template>
  <div class="table">
    <div class="list">
      <h1>工程信息列表</h1>
      <div class="change">
        <div class="search">
          <div class="district">
            <input type="text" v-model="search" />
            <div class="iconfont">&#xe60a;</div>
          </div>
          <button @click="SearchBox">搜索</button>
        </div>

        <div class="btn">
          <button @click="additional">新增</button>
        </div>
      </div>
      <div class="cals">
        <div class="title layout">
          <div v-for="item in title" :key="item">{{ item }}</div>
        </div>
        <div v-if="search === ''">
          <div class="contain">
            <!-- v-for循环 -->
            <div
              class="message layout"
              v-for="(item, index) in Get_Project.list"
              :key="item.id"
            >
              <div>{{ item.id }}</div>
              <div>{{ item.zlName }}</div>
              <div>{{ item.engineeringName }}</div>
              <div>{{ item.typeName }}</div>
              <div>{{ item.startTime }}</div>
              <div>{{ item.endTime }}</div>
              <div>{{ item.budgetAmount }}</div>

              <div>{{ item.settleAmount }}</div>

              <div>{{ item.updateTime }}</div>

              <div>{{ item.updateBy }}</div>
              <div>{{ item.approveName }}</div>
              <div>{{ item.remark }}</div>

              <div class="amend">
                <div class="iconfont" @click="detailedness(item.id)">
                  &#xe604;
                </div>
                <div class="iconfont" @click="edit(item.id)">&#xe635;</div>
                <div class="iconfont" @click="detele(item.id, index)">
                  &#xe673;
                </div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="paging">
            <button @click="previous()">&lt;</button>
            <div
              class="page"
              v-for="(item, index) in total"
              :key="index"
              @click="curPage(item)"
            >
              <a :class="pageNum === item ? 'active' : ''">{{ item }}</a>
            </div>
            <button @click="next()">&gt;</button>
          </div>
        </div>
        <div v-if="search != ''">
          <div class="contain">
            <!-- v-for循环 -->
            <div
              class="message layout"
              v-for="(item, index) in Sea_Project.list"
              :key="item.id"
            >
              <div>{{ item.id }}</div>

              <div>{{ item.zlName }}</div>

              <div>{{ item.engineeringName }}</div>

              <div>{{ item.typeName }}</div>

              <div>{{ item.startTime }}</div>

              <div>{{ item.endTime }}</div>

              <div>{{ item.budgetAmount }}</div>

              <div>{{ item.settleAmount }}</div>

              <div>{{ item.updateTime }}</div>

              <div>{{ item.updateBy }}</div>
              <div>{{ item.approveName }}</div>
              <div>{{ item.remark }}</div>

              <div class="amend">
                <div class="iconfont" @click="detailedness(item.id)">
                  &#xe604;
                </div>
                <div class="iconfont" @click="edit(item.id)">&#xe635;</div>
                <div class="iconfont" @click="detele(item.id, index)">
                  &#xe673;
                </div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="paging">
            <button @click="previous()">&lt;</button>
            <div
              class="page"
              v-for="(item, index) in total1"
              :key="index"
              @click="curPage(item)"
            >
              <a :class="pageNum === item ? 'active' : ''">{{ item }}</a>
            </div>
            <button @click="next1()">&gt;</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情页 -->
    <div class="circumstance" v-show="detailedness_page">
      <div class="base">
        <h1>工程基础信息</h1>
        <div class="basic">
          <div class="info">
            <div class="coding arrange">
              <label for="">座落id:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.zlId"
              />
            </div>
            <div class="tender arrange">
              <label for="">工程编号:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.engineeringNo"
              />
            </div>

            <div class="former arrange">
              <label for="">工程名称:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.engineeringName"
              />
            </div>

            <div class="mold arrange">
              <label for="">工程类型:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.typeName"
              />
            </div>
            <div class="offical arrange">
              <label for="">批文号:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.approveNo"
              />
            </div>
            <div class="batch arrange">
              <label for="">批文名字:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.approveName"
              />
            </div>
            <div class="approval arrange">
              <label for="">批文时间:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.approveTime"
              />
            </div>
            <div class="start arrange">
              <label for="">开工时间:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.startTime"
              />
            </div>
            <div class="finish arrange">
              <label for="">竣工时间:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.endTime"
              />
            </div>
            <div class="budget arrange">
              <label for="">预算金额(元):</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.budgetAmount"
              />
            </div>
            <div class="settle arrange">
              <label for="">结算金额(元):</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.settleAmount"
              />
            </div>

            <div class="creator arrange">
              <label for="">创建时间:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.createTime"
              />
            </div>

            <div class="proportion arrange">
              <label for="">创建人:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.createBy"
              />
            </div>
            <div class="adlit arrange">
              <label for="">修改时间:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.updateTime"
              />
            </div>
            <div class="etc arrange">
              <label for="">最后更新人:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.updateBy"
              />
            </div>

            <div class="remark arrange">
              <label for="">备注:</label>
              <input
                type="text"
                readonly="readonly"
                :value="Get_CurProject.remark"
              />
            </div>
          </div>
        </div>
        <div class="indro ">
          <p>工程简介:</p>
          <textarea
            type="text"
            readonly="readonly"
            :value="Get_CurProject.intro"
          ></textarea>
        </div>
        <div class="btn">
          <button @click="go_back">
            返回
          </button>
        </div>
      </div>
    </div>
    <!-- 编辑页 -->
    <div class="remove" v-show="edit_page">
      <div class="base">
        <h1>工程基础信息</h1>
        <div class="basic">
          <div class="info">
            <div class="coding arrange">
              <label for="">座落id:</label>
              <input type="text" v-model="Get_CurProject.zlId" />
            </div>
            <div class="tender arrange">
              <label for="">工程编号:</label>
              <input type="text" v-model="Get_CurProject.engineeringNo" />
            </div>

            <div class="former arrange">
              <label for="">工程名称:</label>
              <input type="text" v-model="Get_CurProject.engineeringName" />
            </div>

            <div class="mold arrange">
              <label for="">工程类型Id:</label>
              <input type="text" v-model.number="Get_CurProject.typeId" />
            </div>
            <div class="offical arrange">
              <label for="">批文号:</label>
              <input type="text" v-model="Get_CurProject.approveNo" />
            </div>
            <div class="batch arrange">
              <label for="">批文名字:</label>
              <input type="text" v-model="Get_CurProject.approveName" />
            </div>
            <div class="approval arrange">
              <label for="">批文时间:</label>
              <input type="text" v-model="Get_CurProject.approveTime" />
            </div>
            <div class="start arrange">
              <label for="">开工时间:</label>
              <input type="text" v-model.number="Get_CurProject.startTime" />
            </div>
            <div class="finish arrange">
              <label for="">竣工时间:</label>
              <input type="text" v-model.number="Get_CurProject.endTime" />
            </div>
            <div class="budget arrange">
              <label for="">预算金额(元):</label>
              <input type="text" v-model.number="Get_CurProject.budgetAmount" />
            </div>
            <div class="settle arrange">
              <label for="">结算金额(元):</label>
              <input type="text" v-model.number="Get_CurProject.settleAmount" />
            </div>

            <div class="creator arrange">
              <label for="">创建时间:</label>
              <input type="text" v-model="Get_CurProject.createTime" />
            </div>

            <div class="proportion arrange">
              <label for="">创建人:</label>
              <input type="text" v-model="Get_CurProject.createBy" />
            </div>
            <div class="adlit arrange">
              <label for="">修改时间:</label>
              <input type="text" v-model="Get_CurProject.updateTime" />
            </div>
            <div class="etc arrange">
              <label for="">最后更新人:</label>
              <input type="text" v-model="Get_CurProject.updateBy" />
            </div>
            <div class="remark arrange">
              <label for="">备注:</label>
              <input type="text" v-model="Get_CurProject.remark" />
            </div>
          </div>
        </div>
        <div class="indro ">
          <p>营房简介:</p>
          <textarea type="text" v-model="Get_CurProject.intro"></textarea>
        </div>
        <div class="btn">
          <button @click="go_back">
            返回
          </button>
          <button @click="editInfo">
            提交
          </button>
        </div>
      </div>
    </div>
    <!-- 蒙层 -->
    <div class="mask" v-show="addInput">
      <div class="quarter">
        <h1>添加工程信息</h1>
        <div class="inputArea">
          {{ Inc_Project }}
          <div class="location_name layout">
            <label for="">座落Id</label>
            <input type="text" v-model="zlIdNew" />{{ zlIdNew }}
          </div>
          <div class="location layout">
            <label for="">工程编号</label>
            <input type="text" class="" v-model="engineeringNoNew" />
          </div>
          <div class="serial layout">
            <label for="">工程名称</label>
            <input type="text" class="" v-model="engineeringNameNew" />
          </div>
          <div class="barrack layout">
            <label for="">工程类型</label>
            <input type="text" v-model.number="typeIdNew" />
          </div>
          <div class="build layout">
            <label for="">批文号</label>
            <input type="text" class="" v-model="approveNoNew" />
          </div>

          <div class="name layout">
            <label for="">批文名字</label>
            <input type="text" class="" v-model="approveNameNew" />
          </div>
          <div class="time layout">
            <label for="">批文时间</label>
            <input type="date" class="" v-model="approveTimeNew" />
          </div>
          <div class="commence layout">
            <label for="">开工时间</label>
            <input type="date" class="" v-model="startTimeNew" />
          </div>
          <div class="complete layout">
            <label for="">竣工时间</label>
            <input type="date" class="" v-model="endTimeNew" />
          </div>
          <div class="budget layout">
            <label for="">预算金额</label>
            <input type="text" class="" v-model="budgetAmountNew" />
          </div>
          <div class="payment layout">
            <label for="">结算金额</label>
            <input type="text" class="" v-model="settleAmountNew" />
          </div>
          <div class="indro">
            <p>工程说明</p>
            <textarea v-model="introNew"></textarea>
          </div>
          <div class="btn">
            <button @click="go_back">返回</button>
            <button @click="commit">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "BasicInformation",
  data() {
    return {
      title: [
        "id",
        "座落名称",
        "工程名称",
        "工程类型",
        "开工时间",
        "竣工时间",
        "预算金额",
        "结算金额",
        "更新时间",
        "最后更新人",
        "状态",
        "备注",
        "操作"
      ],
      detailedness_page: false, //详情页显示
      edit_page: false, //编辑页显示
      addInput: false, // 新增
      zlId: "",
      engineeringNo: "",
      engineeringName: "",
      typeId: "",
      approveNo: "",
      approveName: "",
      approveTime: "",
      startTime: "",
      endTime: "",
      budgetAmount: "",
      settleAmount: "",
      intro: "",
      createTime: "",
      createBy: "",
      updateTime: "",
      updateBy: "",
      remark: "",

      zlIdNew: "",
      engineeringNoNew: "",
      engineeringNameNew: "",
      typeIdNew: "",
      approveNoNew: "",
      approveNameNew: "",
      approveTimeNew: "",
      startTimeNew: "",
      endTimeNew: "",
      budgetAmountNew: "",
      settleAmountNew: "",
      introNew: "",
      createTimeNew: "",
      createByNew: "",
      updateTimeNew: "",
      updateByNew: "",
      remarkNew: "",

      PageRender: [], // 每页显示的数据
      SearchInfo: [], //搜索显示的内容
      search: "",
      pageNum: 1,
      pageSize: 4,
      total: 1 ,//总页数
      total1: 1 //总页数
    };
  },
  methods: {
    // 详情页
    detailedness(id) {
      this.detailedness_page = !this.detailedness_page;
      this.Get_Project_CurInfo(id);
    },

    // 编辑页
    edit(id) {
      this.edit_page = !this.edit_page;
      this.Get_Project_CurInfo(id);
    },
    // 修改信息
    editInfo() {
      this.EditProjectInfo({
        zlId: this.Get_CurProject.zlId,
        engineeringNo: this.Get_CurProject.engineeringNo,
        engineeringName: this.Get_CurProject.engineeringName,
        typeId: this.Get_CurProject.typeId,
        approveNo: this.Get_CurProject.approveNo,
        approveName: this.Get_CurProject.approveName,
        approveTime: this.Get_CurProject.approveTime,
        startTime: this.Get_CurProject.startTime,
        endTime: this.Get_CurProject.endTime,
        budgetAmount: this.Get_CurProject.budgetAmount,
        settleAmount: this.Get_CurProject.settleAmount,
        intro: this.Get_CurProject.intro,
        createTime: this.Get_CurProject.createBy,
        updateTime: this.Get_CurProject.updateTime,
        updateBy: this.Get_CurProject.updateBy,
        remark: this.Get_CurProject.remark,
        createBy: this.Get_CurProject.createBy,
        id: this.Get_CurProject.id
      });
      this.$router.go(0);
    },
    // 删除当前
    detele(id, index) {
      this.Del_Project_Info(id);
      this.Get_Project.list.splice(index, 1);
      this.Get_project_Info({ pageNum: this.pageNum, pageSize: this.pageSize });
    },
    // 详情 编辑返回
    go_back() {
      this.$router.go(0);
    },
    additional() {
      this.addInput = true;
    },
    // 新增-提交
    commit() {
      this.Inc_Project_Info({
        zlId: this.zlIdNew,
        engineeringNo: this.engineeringNoNew,
        engineeringName: this.engineeringNameNew,
        typeId: this.typeIdNew,
        approveNo: this.approveNoNew,
        approveName: this.approveNameNew,
        approveTime: this.approveTimeNew,
        startTime: this.startTimeNew,
        endTime: this.endTimeNew,
        budgetAmount: this.budgetAmountNew,
        settleAmount: this.settleAmountNew,
        intro: this.introNew,
      });
      this.$router.push("/background/information/project");
    },
    // 渲染
    GetPage(i) {
      this.pageNum = i || this.pageNum;
      this.Get_project_Info({ pageNum: this.pageNum, pageSize: this.pageSize });
      this.Search_project_Info({ pageNum: this.pageNum, pageSize: this.page });
    },
    // 当前页
    curPage(i) {
      this.GetPage(i);
    },
    // 分页-上一页
    previous() {
      if (this.pageNum <= 1) {
        this.GetPage(1);
      } else {
        return this.GetPage(this.pageNum - 1);
      }
      console.log(this.pageNum);
    },
    // 分页-下一页
    next1() {
      if (this.pageNum >= this.total) {
        this.GetPage(this.total);
      } else {
        return this.GetPage(this.pageNum + 1);
      }
      console.log(this.pageNum);
    },
    // 分页-下一页
    next() {
      if (this.pageNum >= this.total1) {
        this.GetPage(this.total1);
      } else {
        return this.GetPage(this.pageNum + 1);
      }
      console.log(this.pageNum);
    },
    // 搜索框
    SearchBox() {
      this.Search_project_Info({
        zlName: this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      });
      console.log(this.Search_project_Info);
    },
    // 上传图片
    upLoad(e) {
      let temp = this;
      let file = e.target.files[0];
      let param = new FormData();
      param.append("file", file);
      param.append("chunk", "0");
      console.log(param.get("file"));
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
    },
    // 时间转换
    unixTimeToDate(unixtime) {
      let now = new Date(unixtime * 1000);
      y = now.getFullYear();
      m = now.getMonth() + 1;
      d = now.getDate();
      return y + "-" + (m < 10 ? "0" + m : m);
    },
    ...mapActions([
      "Get_project_Info",
      "Get_Project_CurInfo",
      "Inc_Project_Info",
      "EditProjectInfo",
      "Del_Project_Info",
      "Search_project_Info",
      "upload_file"
    ])
  },
  computed: {
    Get_Project() {
      return this.$store.state.projectInfo;
    },
    Get_CurProject() {
      return this.$store.state.currentProjectInfo;
    },
    Inc_Project() {
      return this.$store.state.increatProjectInfo;
    },
    Ed_project() {
      return this.$store.state.editProjectInfo;
    },
    Del_Project() {
      return this.$store.state.deleteProjectInfo;
    },
    Sea_Project() {
      return this.$store.state.searchInfo;
    },
    UpLoading() {
      return this.$store.state.uploadIng;
    }
  },
  mounted() {
    this.Get_project_Info({ pageNum: this.pageNum, pageSize: this.pageSize });
    this.Search_project_Info({
      pageNum: this.pageNum,
      pageSize: 4,
    });
  },
  created() {
    this.GetPage();
  },

  watch: {
    Get_Project(newInfo, oldInfo) {
      console.log(newInfo, oldInfo);
      this.total = Math.ceil(newInfo.total / this.pageSize);
    },
    Sea_Project(newInfo, oldInfo) {
      console.log(newInfo, oldInfo);
      this.total1 = Math.ceil(newInfo.total / this.pageSize);
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  h1 {
    text-align: center;
    background-color: #fff;
    padding: 0.8rem 0;
    border-radius: 5px;
  }
  .change {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    padding: 0.5rem 0.5rem;
    // 搜索框
    .search {
      display: flex;
      gap: 20px;
      align-items: center;
      .district {
        display: flex;
        border: 1px solid #000;
        align-items: center;
        border-radius: 15px;
        padding: 0.2rem;
        input {
          outline-color: #fff;
          border: 0;
        }
      }
      select {
        padding: 0.5rem;
      }
    }
    .btn {
      button {
        padding: 0.5rem 0.8rem;
      }
    }
  }
  .cals {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .layout {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 0.8rem 0;
      border-bottom: 1px solid #000;
      div {
        flex-grow: 1;
      }
    }
    .title {
      background-color: rgb(242, 245, 249);
    }
    .contain {
      width: 100%;
      .amend {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
    }
  }

  // 分页
  .paging {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    button {
      padding: 5px 10px;
    }
    .page {
      display: flex;
      gap: 20px;
      align-items: center;
      a {
        text-decoration: none;
      }
    }
  }
}
// 详情 编辑
.circumstance,
.remove {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgb(74, 139, 139);
  .base {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
    margin: 0 auto;
    background-color: rgb(176, 238, 238);
    padding: 1rem;
    h1 {
      text-align: center;
    }
    .basic {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      .info {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;

        .arrange {
          width: 40%;
          display: flex;
          justify-content: space-between;
          label {
            width: 35%;
            text-align: right;
          }
          input {
            width: 60%;
          }
        }
      }
      .image {
        width: 20%;
        border: 1px solid #000;
        height: 100px;
      }
    }
    .indro {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .btn {
      display: flex;
      justify-content: flex-end;
      button {
        padding: 0.5rem 0.8rem;
      }
    }
  }
}
// 蒙层
.mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #fff;
  .quarter {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    h1 {
      text-align: center;
    }
    .inputArea {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      .layout {
        width: 50%;
        display: flex;
        gap: 15px;
        label {
          width: 15%;
        }
        input,
        select {
          width: 40%;
        }
      }
      .indro {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        textarea {
          display: block;
          width: 50%;
        }
      }
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
      }
    }
  }
}
.active {
  color: blue;
}
.layout {
  font-size: 10px;
  text-align: center;
}
.layout :nth-child(1) {
  width: 3%;
}
.layout :nth-child(3) {
  width: 12%;
}
.layout :nth-child(4) {
  width: 5%;
}
.layout :nth-child(5),
:nth-child(8),
:nth-child(9),
:nth-child(11) {
  width: 8%;
}
.layout :nth-child(2),
:nth-child(6),
:nth-child(7),
:nth-child(10),
:nth-child(12),
:nth-child(13) {
  width: 8%;
}
</style>
